{% extends "base.html" %}
{% load ccfilters %}
{% load cctags %}

{% block css %}
<link type="text/css" rel="stylesheet" href="/static/styles/allroutes.css"/>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/static/js/markerclusterer_packed_v3.js"></script>
<script type="text/javascript" src="/static/js/json2.js"></script>
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="{% url views.localjavascript 'jquery.magicmap2.js' %}"></script>
<script type="text/javascript">
$(document).ready(function(){
    var option = { mapTypeId: google.maps.MapTypeId.TERRAIN};
    var startcenter;
    {% if user.location %}
        startcenter = new google.maps.LatLng({{ user.location.lat }}, {{ user.location.lon }});
        option["zoom"] = 9;
    {% else %}
        startcenter = $.magicmap.get_location_by_lang();
        option["zoom"] = 4;
    {% endif %}
    var mmap = new $.magicmap(option);
    uicontrols = { map_container: $("#routes_map_container"),
                   searchbox: $("#routes_search_query"),
                   searchbtn: $("#routes_search_btn"),
                   waiting: $("#routes_search_waiting"),
                   searchresults: $("#routes_search_results"),
                   searchmsg: $("#routes_search_msg")
    };
    mmap.initmap({startcenter: startcenter,
                  routesOption: {enable: true}
                  },
                  uicontrols);
});
</script>
{% endblock %}

{% block menu %}
{% include '_menu_routes.html' %}
{% endblock %}

{% block main-page %}
<div id="allroutes">
    {% if option.enable_gmap %}
        {% include '_base_routes_map.html' %}
    {% endif %}
</div>
{% endblock %}
